<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>修德抄经堂</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" type="text/css" href="../bower_components/mui/dist/css/mui.min.css">
	<link rel="stylesheet" type="text/css" href="../css/base.css">
	<link rel="stylesheet" type="text/css" href="../css/full.css">
	<link rel="stylesheet" type="text/css" href="../css/search.css">
</head>
<body>
	<div class="page">
	 	<div class="content">
	 		<div class="search">
	 			<div class="search_pic">
	 				<img src="../img/bore/search.png" class="cover">
	 			</div>
			    <input type="text" name="" placeholder="输入经书名称或关键字" class="search_desc">
			    <div class="go">
			    	<button class="cover" id="searchBtn">搜索</button>
			    </div>
			</div>
			<div class="search_history">
				<div class="history_title">
					<p class="same">最近搜索</p>
					<!-- <div class="history_tin"> -->
					<div class="history_tin">
						<ul id="history_list">
							<!-- 近期搜索 -->
							<!-- <li><a href="searchnone.html"><span>金刚经</span></a></li>
							<li><a href="searchnone.html"><span>心经</span></a></li>
							<li><a href="searchnone.html"><span>佛经</span></a></li> -->
						</ul>
					</div>
				</div>
				<div class="history_desc">
					<p id="history_hint">暂无搜索记录</p>
				</div>
				<div class="hot_search">
					<p class="same">热门搜索</p>
					<div class="hot_tin">
						<!-- 热门搜索 -->
						<!-- <a href="searchnone.html"><span>金刚经</span></a>
						<a href="searchnone.html"><span>心经</span></a>
						<a href="searchnone.html"><span>佛经</span></a> -->
					</div>
				</div>
			</div>
	 	</div>
	</div>
</body>
<script src="../bower_components/mui/dist/js/mui.min.js"></script>
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script>
	var historySearchKey = "historySearch";
	var historySearchList = [];

	// 从localStorage中恢复搜索历史
	function loadHistorySearch() {
		var historySearchString = localStorage.getItem(historySearchKey);
		if (!historySearchString) {
			return ;
		}
		historySearchList = JSON.parse(historySearchString);
	}

	// 将搜索历史显示到页面(从新到旧排列)
	function showHistorySearch() {
		var html = "";
		for(var i = historySearchList.length - 1; i >= 0; i-- ) {
			var keyword = historySearchList[i];
			html +=
				'<li><a class="historyWordBtn"><span>' + keyword + '</span></a></li>';
		}

		$("#history_list").html(html);

		if (historySearchList.length) {
			$("#history_hint").text("清空搜索记录");
		} else {
			$("#history_hint").text("暂无搜索记录");
		}

		$(".historyWordBtn").click(function(e) {
			var keyword = e.currentTarget.textContent;
			window.location.href = "sousuozhanshi.html?keyword=" + encodeURI(keyword);
		});
	}

	// 清除历史搜索
	function clearHistorySearch() {
		localStorage.removeItem(historySearchKey);
		historySearchList = [];
	}

	// 将关键词加入到localStorage中(会去除已有的重复词)
	function appendHistorySearch(keyword) {
		var index = historySearchList.indexOf(keyword);
		if (index != -1) {
			historySearchList.splice(index, 1);
		}
		historySearchList.push(keyword);
		localStorage.setItem(historySearchKey, JSON.stringify(historySearchList));
	}

	// 加载搜索热词
	function loadHotKeywords() {
		var html = "";
		$.ajax({
			url: "/fe/sutra/edition/search/hot_words",
			success: function(data) {
				var hotWords = data.data.hot_words;
				for (var i = 0; i < hotWords.length; i++ ) {
					html +=
						'<a class="hotwordBtn"><span>' + hotWords[i] + '</span></a>';
				}
				$(".hot_tin").html(html);

				$(".hotwordBtn").click(function(e) {
					var keyword = e.currentTarget.textContent;
					window.location.href = "sousuozhanshi.html?keyword=" + encodeURI(keyword);
				});

			}
		});
	}

	$(function(){
		loadHistorySearch();
		showHistorySearch();

		loadHotKeywords();

		$("#history_hint").click(function() {
			clearHistorySearch();
			showHistorySearch();
		});

		$("#searchBtn").click(function () {
			// 将搜索词加入到localStorage
			var keyword = $(".search_desc").val();
			if (!keyword) {
				return;
			}

			appendHistorySearch(keyword);
			showHistorySearch();

			window.location.href = "sousuozhanshi.html?keyword=" + encodeURI(keyword);
		});
	});
</script>
</html>